<template>
	<view>
		<view class="content">
			<view class="contentsl">
				<!-- 我的积分 -->
				<view class="uswdjf">
					<!-- 星星背景图 -->
					<image class="xinxin" src="../../static/jifen.png" mode=""></image>
					<view class="">
						<view class="hywdjftitle">
							我的积分
						</view>
						<view class="hy2000">
							{{ userInfo.score || 0 }}
						</view>
					</view>
					<view class="qdjfsc" @click="$Router.push('/pages/app/score/list')">
						积分商城
					</view>
				</view>
				<!-- 我的积分接结束 -->
				<!-- 签到 -->
				<view class="qdlis">
					<view class="yiqd">
						已连续签到<text>{{ cuntinueDays }}天</text>
					</view>
					<view class="minqd">
						明日签到可获得<text>{{ dizeng || '0' }}积分</text>
					</view>
					
					<view class="duihao">
						<view class="duihaoitem" v-for="(item,index) in weekList" :key="index">
							<!-- <image v-if="!item.is_sign" src="https://s4.ax1x.com/2022/02/22/HxH9aD.png" mode=""></image>
							<image v-else src="https://s4.ax1x.com/2022/02/22/HxHpVO.png" mode=""></image> -->
							<view class="yiqian" v-if="item.is_sign">
								<text>+{{item.score}}</text>
								<image style="width: 36rpx;height: 36rpx;" src="../../static/yiqian.png" mode=""></image>
							</view>
							<view class="weiqian" v-else>
								<text>+{{item.score}}</text>
								<image style="width: 36rpx;height: 36rpx;" src="../../static/weiqian.png" mode=""></image>
							</view>	
							<view class="">
								{{item.title}}
							</view>
						</view>
						
					</view>
					
					<button :disabled="isSign" class="djqd u-reset-button" :class=" isSign ? 'qdactiv':''" @click="onSign()">
						{{ isSign ? '已签到明天再来签到哦~' : '签到' }}
					</button>
				</view>
				
				<!-- 积分收入支出 -->
				<view class="jfsztitle" style="padding: 0 20rpx;margin-top: 30rpx;">
					<text :class=" jifenactive==1 ? 'jfszactive' :'' "  
					@click="szqh(1,'add')">积分收入</text>
					<text :class=" jifenactive==2 ? 'jfszactive' :'' "
					 @click="szqh(2,'reduce')"> 积分兑换</text>
				</view>
			
			
				<!-- 积分收支情况 -->
				<view class="jfitem" style="padding: 0 20rpx;margin-top: 30rpx;" v-for="(log,index) in scoreLog " :key="index">
					<view class="qf">
						<view class="">
							{{ log.type_name }}
						</view>
						<view class="">
							{{ $u.timeFormat(log.createtime) }}
						</view>
					</view>
					<view class="c10" :class="jifenactive==2 ? 'c10active' :'' " >
						{{ log.wallet }}
					</view>
				</view>
				<!-- 空置页 -->
				<u-empty
						v-if="isEmpty"
				        mode="data"
						text="暂无数据~"
						marginTop="60"
				>
				</u-empty>
	
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				qidnatian:"4",//签到天数
				bgColor:'#0DBE94',
				jifenactive:"1",//积分收入和积分兑换的高亮控制
				qd:"签到",//签到按钮文字
				qddj:false,//点击签到之后
				duihao:[
					{
						title:"周一"
					},
					{
						title:"周二"
					},
					{
						title:"周三"
					},
					{
						title:"周四"
					},
					{
						title:"周五"
					},
					{
						title:"周六"
					},
					{
						title:"周日"
					}
				],
				
				isEmpty: false,
				tabCur: 'all',
				scoreLog: [],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				days: [], //日历
				cuntinueDays: 0, //签到天数
				score: '', //签到获得的积分
				cur_year: 0, //当前选的年
				cur_month: 0, //当前选的月
				cur_day: 0, //当前选择的天
				today: parseInt(new Date().getDate()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				toYear: parseInt(new Date().getFullYear()), //本年
				weeks_ch: ['日', '一', '二', '三', '四', '五', '六'], //星期
				isPresentMonth: false, //是否可签到
				isSign: false,
				showSign: false,
				weekList:[],
				dizeng:0
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad() {
			this.getScoreLog();
			this.cur_year = this.toYear;
			this.cur_month = this.toMonth;
			this.cur_day = this.today;
			this.getSignList();
			// this.getWeek()
		},
		methods: {
			...mapActions(['getUserInfo']),
			// 积分收入和积分兑换切换
			szqh(e,type){
				let _this=this
				_this.jifenactive=e
				if (this.tabCur !== type) {
					this.tabCur = type;
					this.scoreLog = [];
					this.currentPage = 1;
					this.getScoreLog();
				}
			},
			// 当前签到记录
			getSignList() {
				let that = this;
				let month = that.cur_month < 10 ? '0' + that.cur_month : that.cur_month;
				let query = `${that.cur_year}-${month}`;
				that.$http('user.signList', {
					month: query
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data.days,'dayin ')
						that.dizeng = res.data.config
						that.cuntinueDays = that.cuntinueDays === 0 ? res.data.cuntinue_days : that.cuntinueDays;
						that.days = [...res.data.days];
						that.getWeek()
						that.selSign();
					}
				});
			},
			// 选中日期
			selSign() {
				let that = this;
				let selToday = `${that.toYear}-${that.toMonth.toString().padStart(2, '0')}-${that.today.toString().padStart(2, '0')}`;
				let newDay = `${that.cur_year}-${that.cur_month.toString().padStart(2, '0')}-${that.cur_day.toString().padStart(2, '0')}`;
				if (selToday === newDay) {
					let day = that.days.find(item => {
						return item.date === selToday;
					});
					that.isSign = day.is_sign;
				}
			},
			getWeek(){
				let star = this.getMonday('s',0) / 1000
				let end = this.getMonday('e',0) / 1000
				console.log(star,end,this.days)
				this.weekList = []
				this.days.forEach(item =>{
					if(item.time >= star && item.time <= end){
						// console.log(item.item.getDay())
						let week = new Date(item.time*1000).getDay()
						item.title = '周'+ this.weeks_ch[week]
						this.weekList.push(item)
					}
				})
			},
			getMonday(type, dates) {
			    var now = new Date(new Date().toLocaleDateString());
			    var nowTime = now.getTime();
			    var day = now.getDay();
			    var longTime = 24 * 60 * 60 * 1000;
			    var n = longTime * 7 * (dates || 0);
			    if (type == "s") {
			        var dd = nowTime - (day - 1) * longTime + n;
			    };
			    if (type == "e") {
			        var dd = nowTime + (7 - day) * longTime + n;
			    };
			    // dd = new Date(dd);
				console.log(dd)
				
			    return dd;
			},
			//签到
			onSign() {
				let that = this;
				let month = that.cur_month.toString().padStart(2, '0');
				let query = `${that.cur_year}-${month}`;
				that.$http(
					'user.sign',
					{
						month: query
					},
					'签到中...'
				).then(res => {
					if (res.code == 1) {
						that.getSignList();
						that.score = res.data.score;
						that.getUserInfo();
						that.szqh(1,'add');
						// that.showSign = true;
					}
				});
			},
			// 点击签到
			qinado(){
				this.qd="已签到明天再来签到哦~"
				this.qddj=true
			},
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getScoreLog();
				}
			},
			onTab(type) {
				if (this.tabCur !== type) {
					this.tabCur = type;
					this.scoreLog = [];
					this.currentPage = 1;
					this.getScoreLog();
				}
			},
			// 积分明细
			getScoreLog(type) {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('money.walletLog', {
					wallet_type: 'score',
					status: that.tabCur,
					page: that.currentPage
				}).then(res => {
					if (res.code === 1) {
						that.scoreLog = [...that.scoreLog, ...res.data.wallet_logs.data];
						that.lastPage = res.data.last_page;
						that.isEmpty = !that.scoreLog.length;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.yiqian,.weiqian{
		width: 70rpx;
		height: 90rpx;
		background: linear-gradient(0deg, #FF9A33, #FFDD93);
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		padding-top: 15rpx;
		padding-bottom: 13rpx;
		image{
			// margin-top: 9rpx;
		}
	}
	.yiqian > text{
		color: #ffffff;
	}
	.weiqian{
		background:#F6F6F6;
	}
	.content{
		background-image: linear-gradient(180deg, #FFCB6B, #F9F9F9);
		background-size: 100% 300rpx ;
		background-repeat: no-repeat;
	}
	.xinxin{
		position: absolute;
		width: 161rpx;
		height: 151rpx;
		left: 161rpx;
		bottom: 0rpx;
	}
	.uswdjf{
		position: relative;
		overflow: hidden;
	}
	.duihaoitem image{
		width: 56rpx;
		height: 56rpx;
	}
	.duihaoitem{
		text-align: center;
		// margin-right: 39rpx;
	}
	.duihaoitem>view{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.duihao{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.minqd{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin: 13rpx 0 28rpx;
		text{
				padding-left: 10rpx;
				color: #FF9A33;
		}
		
	}
	.yiqd{
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}
	.yiqd>text{
		font-size: 32rpx;
		font-weight: bold;
		color: #FF9A33;
		padding-left: 20rpx;
	}
	.djqd{
		width: 500rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #FF9A33;
		border-radius: 30rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 45rpx auto 0; 
	}
	.qdlis{
		margin: 0 20rpx;
		
		padding: 30rpx 20rpx 40rpx 30rpx;
		background-color: #FFFFFF;
		margin-top: 28rpx;
	}

	.c10{
		font-size: 28rpx;
		font-weight: bold;
		color: #FF9A33;
	}
	.qf>view:first-of-type{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	.c10active{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.qf>view:last-of-type{
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		margin-top: 15rpx;
	}
	.jfitem{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 125rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 25rpx 20rpx;
		margin: 0 20rpx;
		margin-bottom: 20rpx;
	}
	.jfsztitle{
		padding: 39rpx 0 30rpx;
	}
	.jfsztitle>text{
		font-size: 30rpx;
		font-weight: bold;
	}
	.jfsztitle>text:first-of-type{
		margin-right: 80rpx;
	}
	.jfszactive{
		color: #FF9A33;
	}
	.hy2000{
		font-size: 60rpx;
		font-weight: bold;
		color: #FF9A33;
	}
	.hywdjftitle{
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		margin-bottom: 38rpx;
	}
	.qdjfsc{
		background: rgb(255 ,175,  49);
		width: 160rpx;
		height: 60rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		border-radius: 40rpx;
		position: relative;
		top: 32rpx;
	}
	.uswdjf{
		display: flex;
		justify-content: space-between;
		padding: 16rpx 40rpx 0;
		width: 717rpx;
		min-height: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 8rpx;
		margin: 0 auto;
	}
	.dxq{
		background: #FF9A33;
	}
	.dxq /deep/ text{
		color: #ffffff;
	}
	.contentl{
		width: 95%;
		padding: 150rpx 2.5% 0;
		height: 150rpx;
	}
	.contentsl{
		position: relative;
		// top:-150rpx;
	}
	// 已签到高亮
	.qdactiv{
		width: 500rpx;
		height: 60rpx;
		background: #E4E4E4;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
	}
</style>
